<template>
	<view>
		<u-navbar title="用户管理" title-color="#1f1f1f" back-icon-color="#1f1f1f" :background="background"></u-navbar>
		<view class="flex-col page">
			<view class="flex-col group_2">
				<view class="flex-row section_2">
					<view class="flex-col flex-1">
						<text class="font text_2 text_3">{{serviceName}}</text>
						<image v-if="level == 2" class="image_4" src="https://terminator.axu9.com/images/yinpai.png" />
						<image v-if="level == 3" class="image_4" src="https://terminator.axu9.com/images/jinpai.png" />
						<text class="font_3 text_2 text_8">到期时间:{{endTime}}</text>
					</view>
					<!-- <view class="flex-col flex-1 items-center">
						<text class="self-center text_2 text_4">积分</text>
						<text class="self-center text_2 text_5">{{integral}}</text>
					</view> -->
					<view class="flex-col flex-1 items-center justify-center">
						<view class="">
							<text class="self-center text_2 text_5">{{balance}}</text>
							<text class="self-center text_2 text_4">元</text>
						</view>
						<view @click="toWithdraw" class="withdraw-btn">
							立即提现
						</view>
					</view>
				</view>
				<view class="flex-col ">
					<view class="flex-row option justify-between">
						<view @click="toHuoke" class="option-lf flex-row justify-between">
							<view class="flex-col self-start">
								<text class="self-start options-title text_2 text_9 ml-7">获客管理</text>
								<view class="flex-col justify-start items-center self-stretch options-text mt-12 ml-7">
									<text>查看详情</text>
								</view>
							</view>
							<view class="flex-row items-end">
								<image class="image_6" src="https://terminator.axu9.com/images/yhgl-icon.png" />
							</view>
						</view>
						<view @click="toCardPwd" class="option-lf flex-row justify-between">
							<view class="flex-col self-start">
								<text class="self-start options-title text_2 text_9 ml-7">卡密管理</text>
								<view class="flex-col justify-start items-center self-stretch options-text mt-12 ml-7">
									<text>查看详情</text>
								</view>
							</view>
							<view class="flex-row items-end">
								<image class="image_6" src="https://terminator.axu9.com/images/kmgl-icon.png" />
							</view>
						</view>
						<!-- <view class="option-rg flex-col justify-between">
							<view @click="toRecords" class="option-rg-t flex-row justify-between">
								<view class="flex-col items-center">
									<text class="self-start options-title">积分记录</text>
									<view class="flex-row justify-center options-text mt-5">
										<text>查看详情</text>
									</view>
								</view>
								<view class="flex-row justify-start image_9_view">
									<image class="image_9" src="https://terminator.axu9.com/images/jfjl-icon.png" />
								</view>
							</view>
							<view @click="toCardPwd" class="option-rg-b flex-row justify-between">
								<view class="flex-col items-center">
									<text class="self-start options-title">卡密管理</text>
									<view class="flex-row justify-center options-text mt-5">
										<text>查看详情</text>
									</view>
								</view>
								<view class="flex-row">
									<image class="image_10" src="https://terminator.axu9.com/images/kmgl-icon.png" />
								</view>
							</view>
						</view> -->

					</view>


					<view class="flex-row justify-between items-center relative section_5">
						<view class="flex-row items-center w-80">
							<image class="shrink-0 image_7" src="https://terminator.axu9.com/images/search-black.png" />
							<input type="text" v-model="userValue" placeholder="搜索用户" placeholder-class="font_3 text_12"
								class="font_3 text_12 ml-9" />
						</view>
						<view @click="search" class="flex-col justify-start items-center text-wrapper_4"><text
								class="font_3 text_13">搜索</text></view>
					</view>
					
				</view>
			</view>
			<view class="flex-col justify-start group_13">
				<!-- <view class="section_9"></view> -->
				<view class="flex-col mbt-20" :class="index == 0 ? 'section_6' : 'section_8'" v-for="(item,index) in list" :key="index">
					<view class="flex-row justify-between items-center">
						<view class="flex-row items-center">
							<image :src="item.avatarUrl" class="avatar-img" mode=""></image>
						</view>
						<view class="flex-col flex-1 pd-l-10">
							<view class="flex-row justify-between mgb-12">
								<view class="flex-row flex-1">
									<view class="font_4">
										<text class="nickname-text">{{item.nickName}}</text>
										<image class="image_8 horiz-divider mgl-14 mgr-14"
											src="https://terminator.axu9.com/images/puraser-line.png" />
									</view>
									<view class="flex-row flex-1 items-center" >
										<text class="integral-text mgr-12">算力</text>
										<text class="integral-num">{{item.integral}}</text>
									</view>
								</view>

								<view @click="callMobile(item.mobile)" class="call-mobile-btn">
									拨打电话
								</view>
							</view>
							<view class="flex-row items-center justify-between">
								<view class="">
									<text class="font_10 mgr-12">到期时间</text>
									<text class="font_11">{{item.agent_end | fomatTime}}</text>
								</view>
								<image class="image_8 horiz-divider"
									src="https://terminator.axu9.com/images/puraser-line.png" />
								<view class="pdr-20">
									<text class="font_10 mgr-12">最后使用时间</text>
									<text class="font_11">{{item.last_usetime | fomatTime}}</text>
								</view>
							</view>

						</view>
						<!-- <view class="flex-row">
							<view @click="continiuActive(item.id,item.mobile)"
								class="flex-col justify-start items-center text-wrapper_5">
								<text class="font_2 text_20">续费</text>
							</view>
							<view @click="optionsUser(1,item.id)" v-if="item.status == 1"
								class="ml-4 flex-col justify-start items-center text-wrapper_6">
								<text class="font_6 text_21">禁用</text>
							</view>
							<view @click="optionsUser(2,item.id)" v-if="item.status == 0"
								class="ml-4 flex-col justify-start items-center text-wrapper_6">
								<text class="font_6 text_21">启用</text>
							</view>
						</view>
					 -->
					</view>

					<!-- <view class="flex-row equal-division_2 mt-8-5">
						<view class="flex-col items-center equal-division-item_3 flex-1">
							<text class="font_10">剩余积分</text>
							<text class="font_11 mt-15">{{item.integral}}</text>
						</view>
						<image class="image_8 horiz-divider ml-19-5"
							src="https://terminator.axu9.com/images/puraser-line.png" />

						<view class="flex-col items-center equal-division-item_3 ml-19-5 flex-1">
							<text class="font_10">到期时间</text>
							<text class="font_11 mt-15">{{item.agent_end}}</text>
						</view>
					</view>
				 -->
				</view>
			</view>

		</view>
		<!-- 邀请好友 -->
		<!-- <view class="invite" v-if="userId != ''">
			<image @click="toinvite" class="invite-img" src="https://terminator.axu9.com/images/invite-icon.png" mode=""></image>
		</view> -->
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import {
		getUserinfo,
		getService,
		userManage,
		userDisable,
		jihuoUser
	} from "@/api/user.js"
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				// serviceName: '沈阳创彩科技有限公司', //服务商名称
				level: 0, // 0普通用户 1激活用户 2银牌 3金牌
				limitTime: '2024-08-20', //到期时间
				integral: 888, //积分
				userValue: '', //搜索用户
				list: [],
				integral: 0, //积分
				serviceName: '', //服务商名称
				address: '', //服务商地址
				tel: '', //服务商电话
				endTime: '', //到期时间
				jhUid: '', //激活用户uid
				type: 1, //1禁用 2启用
				jhUid: '', //激活用户id
				balance: 0,//余额
				page: 1,
				totalPage: 1,
				commonData: {}
				
			}
		},
		filters: {
			fomatTime(value) {
				if(!value){
					return
				}
				var time = value;
				var arr = time.split(" ")
				return arr[0]
			}
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		onShow() {
			this.commonData = commonData;
			this.list = [];
			this.page = 1;
			this.getUserinfo();
			this.getPurchase();
			// this.getUser();
			this.getUserNew();
		},
		onReachBottom() {
			console.log('到底了')
			if(this.page < this.totalPage ){
				this.page ++;
				this.getUserNew();
			}else {
				uni.showToast({
					title: '已加载全部',
					icon: 'none'
				})
			}
		},
		methods: {
			// 立即提现
			toWithdraw(){
				uni.navigateTo({
					url: '/pagesMine/withdraw/index'
				})
			},
			// 打电话
			callMobile(mobile){
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			},
			// 续费
			continiuActive(id, mobile) {
				uni.navigateTo({
					url: '/pagesMine/activeMerchant/index?type=2' + '&jhUid=' + id + '&mobile=' + mobile
				})
			},
			// 搜索用户
			search() {
				// this.getUser();
				this.list = [];
				this.page = 1;
				this.getUserNew();
			},
			// 操作用户
			optionsUser(type, id) {
				// let type = type;
				let text = type == 1 ? '禁用' : '启用'
				this.jhUid = id;
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定' + text + '该用户么？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.forbit(type);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 禁用/启用用户
			forbit(type) {
				userDisable({
					uid: uni.getStorageSync("userId"),
					jy_uid: this.jhUid,
					type: type
				}).then(res => {
					console.log(res, '禁用')
					if (res.errno == 0) {
						uni.showToast({
							title: '成功',
							icon: 'none'
						})
						// this.getUser();
						this.getUserNew();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 用户管理-新
			getUserNew() {
				jihuoUser({
					uid: uni.getStorageSync("userId"),
					nickName: this.userValue,
					page: this.page
				}).then(res => {
					console.log(res, 'userManage')
					if (res.errno == 0) {
						// this.integral = res.data.user.integral;
						// this.level = res.data.user.level_id;
						// this.endTime = res.data.user.agent_end.split(" ")[0];
						// this.list = res.data.data;
						this.totalPage = res.data.last_page;
						this.list = [...this.list,...res.data.data];
					}

				})
			},
			// 用户管理
			getUser() {
				userManage({
					uid: uni.getStorageSync("userId"),
					username: this.userValue
				}).then(res => {
					console.log(res, 'userManage')
					if (res.errno == 0) {
						// this.integral = res.data.user.integral;
						// this.level = res.data.user.level_id;
						// this.endTime = res.data.user.agent_end.split(" ")[0];
						this.list = res.data.xiaji;
					}

				})
			},
			// 查看代理商信息
			getPurchase() {
				getService().then(res => {
					console.log(res, 'gg');
					if (res.errno == 0) {
						this.serviceName = res.data.store_company_name;
						this.address = res.data.store_company_address;
						this.tel = res.data.store_company_tel;

					}


				}).catch(err => {

				})
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'getUserinfo')
					this.integral = res.data.integral;
					this.level = res.data.level_id;
					this.endTime = res.data.agent_end;
					this.balance = res.data.balance;
				}).catch(err => {

				})
			},
			// 激活用户
			toActive() {
				uni.navigateTo({
					url: '/pagesMine/activeMerchant/index?type=1'
				})
			},
			// 跳转到获客管理
			toHuoke(){
				uni.navigateTo({
					url: '/pagesMine/huokeManage/index'
				})
			},
			// 跳转到兑换记录
			toRecords() {
				uni.navigateTo({
					url: '/pagesMine/exchangeRecordsTotal/index'
				})
			},
			// 卡密管理
			toCardPwd() {
				uni.navigateTo({
					url: '/pagesMine/cardManage/index'
				})
			},
			// 跳转到海报页面
			toinvite() {
				uni.navigateTo({
					url: '/pagesMine/poster/index?uid=' + this.userId
				})
			},
		}
	}
</script>
<style>
	@import url(../../static/css/common.css);
	
	page {
		width: 100vw;
		/* overflow-x: hidden; */
		background-size: 100% 433rpx;
		background-image: linear-gradient(181deg, #d6f4ed 0%, #f5f5f5 100%);
		background-repeat: no-repeat;
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	
	.mt-5 {
		margin-top: 10rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.mt-11-5 {
		margin-top: 23rpx;
	}

	.mt-8-5 {
		margin-top: 17rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}


	.mt-12 {
		margin-top: 24rpx;
	}

	.ml-19-5 {
		margin-left: 39rpx;
	}


	.ml-7 {
		margin-left: 7rpx;
	}

	.mbt-20 {
		margin-bottom: 20rpx;
	}


	.page {

		height: 100%;
		/* width: 100%; */
		/* width: 100vw;
		overflow-y: auto;
		overflow-x: hidden; */
	}


	.group_2 {
		padding: 0 28rpx;
	}

	.section_2 {

		filter: drop-shadow(0rpx -4rpx 7rpx #1f242c12);
		background-image: url('https://terminator.axu9.com/images/yhgl-top-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		min-height: 295rpx;
		padding: 93rpx 30rpx 30rpx 30rpx;
	}



	.top-bg {
		padding: 40rpx 30rpx 30rpx 30rpx;
	}



	.font_2 {
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		line-height: 22rpx;
		color: #ffffff;
	}



	.image_4 {
		width: 103rpx;
		height: 56rpx;
		margin-top: 33rpx;
		margin-bottom: 44rpx;
	}



	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
		color: #ffffff;
	}


	.avatar-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.font_4 {
		max-width: 60%;
		font-weight: 500;
		font-size: 28rpx;
		text-align: start;
		color: #000000;
	}

	.nickname-text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.integral-text {
		font-size: 22rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.integral-num {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #01af84;
		max-width: 70%;
		word-break: break-all;
	}
	.pd-l-10 {
		padding-left: 20rpx;
	}
	.mgl-14 {
		margin-left: 14rpx;
	}
	.mgr-14 {
		margin-right: 14rpx;
	}
	.mgr-12 {
		margin-right: 12rpx;
	}

	.call-mobile-btn {
		/* margin-right: 20rpx; */
		margin-bottom: 3rpx;
		border-radius: 22rpx;
		width: 130rpx;
		height: 46rpx;
		border: 1rpx solid #01af84;
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 46rpx;
		color: #00bf90;
		text-align: center;
	}


	.image_6 {
		/* width: 144rpx;
		height: 144rpx; */
		width: 103rpx;
		height: 103rpx;
	}

	.image_9_view {
		width: 100rpx;
	}

	.image_9 {
		width: 97rpx;
		height: 97rpx;
	}

	.image_10 {
		width: 100rpx;
		height: 100rpx;
	}




	.font_6 {
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		line-height: 22rpx;
		color: #00bf90;
	}


	.section_5 {
		margin-top: 27rpx;
		padding: 6rpx 6rpx 6rpx 27rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
	}

	.image_7 {
		width: 26rpx;
		height: 26rpx;
	}

	.w-80 {
		width: 80%;
	}

	.text_12 {
		color: #0f4135;
		line-height: 23rpx;
		width: 100%;
	}

	.text-wrapper_4 {
		padding: 14rpx 0;
		// background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%); 
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 4rpx;
		width: 116rpx;
		height: 51rpx;
	}

	.text_13 {
		line-height: 23rpx;
	}

	

	.group_11 {
		padding: 19rpx 22rpx 16rpx;
	}

	.section_7 {
		background-color: #00bf90;
		border-radius: 3.5rpx;
		width: 7rpx;
		height: 39rpx;
	}

	.font {
		font-size: 34rpx;
		font-family: PingFang SC;
		line-height: 40rpx;
	}

	.text_14 {
		color: #0f4135;
	}

	.divider {
		margin: 0 15rpx;
		opacity: 0.2;
		height: 1rpx;
		border-left: dashed 1rpx #536074;
		border-right: dashed 1rpx #536074;
		border-top: dashed 1rpx #536074;
		border-bottom: dashed 1rpx #536074;
	}

	.equal-division {
		margin-top: 19rpx;
	}

	.group_12 {
		padding-left: 10rpx;
		padding-right: 5rpx;
	}

	.equal-division-item_2 {
		padding: 10rpx 0;
		width: 133rpx;
	}

	.font_7 {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
		font-weight: 500;
		color: #999999;
	}

	.font_8 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
		font-weight: 500;
		color: #000000;
	}

	.text_15 {
		line-height: 23rpx;
	}

	.text_16 {
		line-height: 23rpx;
	}

	.text_17 {
		line-height: 23rpx;
	}

	.text_18 {
		color: #01af84;
		line-height: 23rpx;
	}

	.group_13 {
		margin-top: 20rpx;
		/* padding: 46rpx 0 105rpx; */
	}

	.section_9 {
		margin-left: 30rpx;
		margin-right: 34rpx;
		opacity: 0.58;
		background-image: linear-gradient(0deg, #fff6f600 0%, #fff6f6 100%);
		height: 79rpx;
	}
	
	.section_6 {
		padding: 44rpx 32rpx;
		background-image: linear-gradient(0deg, #fefefe 0%, #e3fff2 100%);
		box-shadow: 0rpx 0rpx 10rpx #d1f0da70;
	}
	.section_8 {
		padding: 44rpx 32rpx;
		/* padding: 19rpx 52rpx 31rpx 49rpx; */
		background-image: linear-gradient(0deg, #ffffff 0%, #ffffff00 100%);
	}


	.text_2 {
		text-transform: uppercase;
	}



	.text_9 {
		line-height: 26rpx;
	}

	.text_8 {
		/* margin-left: 33rpx; */
		line-height: 23rpx;
		white-space: nowrap;
	}

	.text_5 {
		/* margin-right: 35rpx; */
		color: #ffffff;
		font-size: 80rpx;
		font-family: Adobe Heiti Std;
		width: 80%;
		word-break: break-all;
		text-align: center;
		line-height: 80rpx;
	}

	.withdraw-btn {
		margin-top: 27rpx;
		background-image: linear-gradient(90deg, #c5fff2 0%, #ffffff 100%);
		border-radius: 32rpx;
		width: 172rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #07DA76;
	}

	.text_4 {
		/* margin-right: 91rpx; */
		color: #ffffff;
		font-size: 24rpx;
		font-family: Adobe Heiti Std;
		line-height: 60rpx;
		letter-spacing: 1.44rpx;
	}

	.text_3 {
		color: #ffffff;
		font-weight: 500;
	}



	.text-wrapper_5 {
		padding: 8rpx 0;
		background-image: linear-gradient(90deg, #00c959 0%, #19d5b5 100%);
		border-radius: 19rpx;
		width: 100rpx;
		height: 38rpx;
	}

	.text_20 {
		line-height: 21rpx;
	}

	.text-wrapper_6 {
		padding: 8rpx 0;
		border-radius: 19rpx;
		width: 100rpx;
		height: 38rpx;
		border-left: solid 2rpx #00bf90;
		border-right: solid 2rpx #00bf90;
		border-top: solid 2rpx #00bf90;
		border-bottom: solid 2rpx #00bf90;
	}

	.text_21 {
		line-height: 21rpx;
	}

	.equal-division_2 {
		margin-left: 27rpx;
		margin-right: 35rpx;
	}

	.equal-division-item_3 {
		padding-bottom: 10rpx;
	}

	.font_10 {
		font-size: 20rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		color: #999999;
	}
	.mgb-12 {
		margin-bottom: 12rpx;
	}
	.pdr-20 {
		padding-right: 20rpx;
	}

	.font_11 {
		font-size: 24rpx;
		color: #000000;
	}

	.image_8 {
		margin-top: 5rpx;
	}

	.horiz-divider {
		width: 1rpx;
		height: 24rpx;
	}




	.option {
		margin-top: 25rpx;
	}

	.option-lf {
		width: 335rpx;
		border-radius: 12rpx;
		background: #ffffff;
		padding: 37rpx 28rpx 28rpx 18rpx;
	}

	.option-rg-t,
	.option-rg-b {
		width: 335rpx;
		border-radius: 12rpx;
		background: #ffffff;
		padding: 15rpx 28rpx 8rpx;
	}

	.option-rg-t {
		margin-bottom: 20rpx;
	}

	.options-title {
		font-weight: 500;
		font-size: 32rpx;
		text-align: left;
		color: #000000;

	}

	.options-text {
		border-radius: 17rpx;
		width: 117rpx;
		border: 2rpx solid #00bf90;
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 33rpx;
		color: #00bf90;
		text-align: center;
	}

	.invite {
		position: fixed;
		right: 10rpx;
		top: 500rpx;
	}

	.invite-img {
		width: 131rpx;
		height: 129rpx;
	}
</style>